<template>
  <div class="header-container">
    <div class="header-con">
      <h1 class="logo"></h1>
      <ul class="m-nav">
        <li><a href="#">发现音乐</a></li>
        <li><a href="#">我的音乐</a></li>
        <li><a href="#">关注</a></li>
        <li><a href="#">商城</a></li>
        <li><a href="#">音乐人</a></li>
        <li style="position: relative;"><a href="#">下载客户端</a><sup></sup></li>
      </ul>
      <div class="search-box">
        <span class="search-icon"></span>
        <input type="text" class="search-ipt" placeholder="音乐/视频/电台/用户">
      </div>
      <div class="header-right">
        <a href="#" class="author-center">创作者中心</a>
        <button class="login-btn" @click="openLogin">
          <router-link to="login" v-if="loginStatus">登录</router-link>
          <div class="headimg" v-else><img src="../assets/banner/head.jpg" alt="头像"></div>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cloudheader',
  data() {
    return {
      loginStatus: true
    }
  },
  methods: {
    openLogin() {
      this.$store.commit('ToggleLogin')
      this.$store.commit('goQrLogin')
    }
  },
  mounted() {
    if (this.$cookie.get('pwdcookie')) {
      this.loginStatus = false
    }
  }
}
</script>

<style lang="less" scoped>
@import '../assets/base.less';
.header-container {
  background-color: @black;
  height: 70px;
  .header-con {
    width: 1125px;
    margin: auto;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .logo {
    width: 180px;
    height: 100%;
    background-color: pink;
    background: url(../assets/music.png) 1px -1px;
  }
  .m-nav {
    display: flex;
    height: 100%;
    li {
      a {
        padding: 0 19px;
        display: inline-block;
        line-height: 70px;
        height: 100%;
        color: #ccc;
        font-size: 14px;
        text-decoration: none;
        &:hover {
          background-color: #000;
          color: #fff;
        }
      }
      sup {
        display: inline-block;
        width: 28px;
        height: 19px;
        background: url(../assets/music.png) 50px 3px;
        position: absolute;
        top: 25px;
        right: -20px;
      }
    }
  }
  .search-box {
    height: 100%;
    margin-left: 89px;
    position: relative;
    display: flex;
    align-items: center;
    .search-ipt {
      width: 70%;
      height: 35%;
      border-radius: 50px;
      padding-left: 22px;
      outline: none;
      font-size: 12px;
    }
    .search-icon {
      width: 20px;
      height: 25%;
      background: url(../assets/music.png) no-repeat -4px -104px;
      position: absolute;
      top: 50%;
      margin-top: -10.625px;
      left: 3px;
    }
  }
  .header-right {
    height: 100%;
    display: flex;
    align-items: center;
    .author-center {
      display: inline-block;
      text-decoration: none;
      font-size: 12px;
      color: #ccc;
      border: 1px solid #4f4f4f;
      padding: 10px 16px;
      border-radius: 50px;
      &:hover {
        color: #fff;
        border: 1px solid #ccc;
      }
    }
    .login-btn {
      border: none;
      background-color: @black;
      margin-left: 12px;
      a {
        text-decoration: none;
        color: #787878;
        font-size: 12px;
      }
      a:hover {
        border-bottom: 1px solid #787878;
      }
      .headimg {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        overflow: hidden;
        cursor: pointer;
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>